<template>
  <div class="contain">
    <el-carousel  class="siwpers" height="30rem">
        <el-carousel-item v-for="item in swiperList" :key="item.id">
            <div class="siwpers-img">
                <img class="siwper-items" :src="item.img" alt="">
            </div>
        </el-carousel-item>
    </el-carousel>
    <!-- 列表  -->
    <div class="article">
         <div v-for="item in recoveryList" :key="item.id" class="article-box">
             <img :src="item.prodImg" alt="#" class="article-img">
             <div class="detail-box">
             <div><span class="detail-name">产品名称：</span><span  class="detail-name1">{{ item.productName }}</span></div>
             <div><span class="detail-name">企业名称：</span><span  class="detail-name1">{{ item.companyName }}</span></div>
             <div><span class="detail-name">召回时间：</span><span  class="detail-name1">{{ item.recallDate }}</span></div> 
            </div>
             <div class="article-time"><div class="time-lf">查看详情</div><div class="time-rh" @click="toDetail(item)"><img class="time-img" src="@/assets/article-r.png" alt=""></div></div>
         </div>
         <div class="myPagination">
            <div class="mores" @click="handleCurrentChange(info.page-1)">上一页</div>
            <span class="centerP">{{ info.page }}</span>
            <div class="mores" @click="handleCurrentChange(info.page+1)">下一页</div>
         </div>
         <div class="pagination"><el-pagination background layout="prev, pager, next" v-model:current-page="info.page" :page-size="info.size" :total="total" @current-change="handleCurrentChange" /></div>
        </div>
     </div>
</template>
<script setup>
import {getBannerList,findRecallList} from '../../util/api.js'
const info=ref({
    pageno:1,
    pagesize:8
})
const recoveryList = ref([])
const route = useRoute()
const swiperList =ref([])
const getBannerLists = async()=>{
            let res= await getBannerList({type:route.meta.title})
            if(res.code!=200)return
            swiperList.value=res.data
 }
const router = useRouter()
const total = ref(0)
const handleCurrentChange = (val)=>{
    info.value.pageno = val
    getrecoveryList()
}
const getrecoveryList = async()=>{
    let res = await findRecallList(info.value)
    console.log(res)
    if(res.code!=200)return
    recoveryList.value = res.rows
    total.value = res.total
}
onMounted(()=>{
    getBannerLists()
    getrecoveryList()
})
const toDetail = (val) =>{
    // console.log(val.companyId)
    router.push({
        path:"/recoveryDetail",
        query:{id:val.id}
    })
}
</script>
<style lang="scss" scoped>
.contain{
    width:100%;
    .siwpers{
        width: 100%;
        height: 480px;
        :deep(.el-carousel__arrow--left){
                width: 60px;
                height: 60px;
                left: 80px;
                border: 1px solid #ffffff;
                font-weight: 500;
                font-size: 16px;
                color: #ffffff;
                background: none;
                }

                //右箭头
        :deep(.el-carousel__arrow--right){
        width: 60px;
        height: 60px;
        right: 80px;
        border: 1px solid #ffffff;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        background: none;
        }
        .siwpers-img{
            width: 100%;
            height: 480px;
            background-size: 100% 100%;
            position: relative; 
            .siwper-items{
                width: 100%;
                height: 100%;
            }         
        }
    } 
    .article{
        width: 100%;
        box-sizing: border-box;
        padding: 0 150px;
        background-color: #F8F8F8;
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        padding: 100px 150px;
        position: relative;
        .pagination{
            display: inline-block;
            position: absolute;
            right: 148px;
            bottom: 100px;
            :deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
                background-color: #009966;   // 进行修改未选中背景和字体
                color: #FFFFFF;
            }
            :deep(.el-pagination.is-background .el-pager li:not(.disabled)) {
               background-color: #fff;        /* 进行修改未选中背景和字体 */
               color: #31312E;
               border: 1px solid rgba(0,0,0,0.15);
            }
            :deep(.el-pagination.is-background .btn-prev){
                background-color: #FFFFFF;
                border-radius: 2px;
                border: 1px solid rgba(0,0,0,0.15);
            }
            :deep(.el-pagination.is-background .btn-next){
                background-color: #FFFFFF;
                border-radius: 2px;
                border: 1px solid rgba(0,0,0,0.15);
            }
        }
        .myPagination{
            display: none;
        }
        .article-box{
            width: 23%;
            background-color: #FFFFFF;
            box-shadow: 0px 0px 16px 2px rgba(0,0,0,0.08);
            
            margin-bottom: 64px;
            margin-right: 2%;
            .article-img{
                display: block;
                width: 100%;
                height: 220px;
            }
            .detail-box{
                    width: 100%;
                    font-weight: 500;
                    font-size: 22px;
                    color: #1F1F1F;
                    .detail-name{
                        font-weight: 400;
                        color: #A3A3A3;
                        font-size: 22px;
                    }
                }
            .detail-box div{
                    margin: 15px;
             }
            .article-time{
                width:calc(100% - 40px);
                margin: 0 auto; 
                border-top: 1px solid rgba(0,0,0,0.12);
                box-sizing: border-box;
                padding: 20px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .time-lf{
                   display: flex;
                   align-items: center;
                   flex: 1;
                }
                .time-rh{
                    width: 38px;
                    height: 38px;
                    cursor: pointer;
                    img{
                        width: 38px;
                        height: 38px;
                    }
                }
            }
        }
        .article-box:nth-child(4n){
            margin-right: 0;
        }
    } 
}
</style>